<!-- @format -->

<template>
  <div>
    <p ref="ppp">姬霓太美</p>
    <MyTest ref="test" />
  </div>
</template>

<script>
  import MyTest from './components/MyTest.vue'
  export default {
    components: {
      MyTest
    },
    mounted() {
      // 1.获取原生DOM的两种方式：
      // (1) 第1种：
      // console.log(document.querySelector('p'))
      // (2) 第2种获取真实DOM的方式，借助$refs的方式，获取到了，就可以去操作它
      // console.log(this.$refs.ppp)
      // 2. 获取自定义标签(组件对象)：
      // console.log(this.$refs.test) // MyTest组件对象，等同于组件内部的this，
      // 拿到了组件对象，目的是可以调用组件的内部的方法，为你所用
      this.$refs.test.fn()
    }
  }
</script>

<style></style>
